<template>
    <div class="modal" data-keyboard="false" data-backdrop="static" id="give-role-model" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">分配角色</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-3" v-for="role in roles">
                            <label class="margin-right-10">
                                <input v-model="myRoles" name="role" type="checkbox" v-bind:value="role.id">
                                <span class="text">{{ role.name }}</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="sr">提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['name', 'title'],
        data() {
            return {
                roles: [],
                myRoles: [],
            }
        },
        methods: {
            // 设置分配角色
            sr() {
                this.post(this.url, {roles : this.myRoles}).then(response => {
                    $("#give-role-model").modal('hide');
                    this.alert(this.title + '角色分配成功');
                });
            },
            gr(id) {
                this.url = this.name + '/' + id + '/give_role';
                this.roles = [];
                this.myRoles = [];

                this.get(this.url).then(response => {
                    this.roles = response.roles;
                    this.myRoles = response.myRoles;
                    $("#give-role-model").modal('show');
                });
            },
        }
    }
</script>